<template>
  <simple-layout title="产品详情">
    <div class="product-main" :style="{height:mainHeight}">
<!--      产品信息基本 -->
      <div class="product-main-header">
        <img :src="productIfo.url" alt="">
        <span class="product-main-header-info">
          <div>{{productIfo.productName}}</div>
          <div>{{productIfo.productTip}}</div>
        </span>
      </div>
<!--产品金额详情-->
      <div class="product-main-body">
        <div class="product-money-info">
          <div class="product-money-info l">
            <div>定存金额</div>
            <div>¥1000</div>
          </div>
          <div class="product-money-info r">
            <div>产品期限</div>
            <div>31天</div>
          </div>
        </div>

        <div class="product-safe-info">
          <span><img src="../../assets/productinfo/fengxian@3x.png" alt="">低风险</span>
          <span>100元起购</span>
        </div>
      </div>

      <div style="height: 1rem; background: rgb(243, 241, 241);"></div>


<!--      产品亮点 -->
      <div>
        <div class="product-lin">产品亮点</div>
        <div class="product-lin-info">
          <img src="../../assets/productinfo/yinhang@3x.png" alt="">
          <div class="product-explain">
            <div>银行存款，本金保障</div>
            <div>本产品为银行存款产品，本金安全有保障，不与你有任何损失</div>
          </div>
        </div>
        <div class="product-lin-info">
          <img src="../../assets/productinfo/wushouxufei@3x.png" alt="">
          <div class="product-explain">
            <div>无手续费</div>
            <div>购买，赎回没有任何费用</div>
          </div>
        </div>
      </div>
    </div>

    <div class="product-footer">
      <button class="ab-btn ab-btn-primary">定 存</button>
    </div>
  </simple-layout>
</template>


<script>
  import SimpleLayout from '../../components/SimpleLayout';

  export default {
    name: "Login",
    components: {
      //someComponent
      SimpleLayout
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
        productIfo: {
          url: "https://img.yzcdn.cn/vant/apple-1.jpg",
          productName: "安邦按增益31天",
          productTip : "由江苏银行股份有限公司提供",
        },
        mainHeight: '',
      }
    },
    computed: {},
    watch: {},
    mounted: function () {
      console.log( window.screen.height)
      this.mainHeight = `${ window.screen.height - 105}px`;
    },
    methods: {
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ab-btn.ab-btn-primary {
    width: 80%;
    background: #5C7CE5;
    border-radius: 20px;
    height: 4rem;
    font-size: 24px;
    color: #fff;
  }
  .product-footer{
    height: 60px;
    /*border: 1px solid;*/
    position: fixed;
    bottom: 0;
    width: 100%;
  }




  .product-lin{
    height: 4rem;
    line-height: 4rem;
    font-size: 24px;
    font-weight: bold;
    margin: 1rem;
  }
  .product-lin-info{
    display: flex;
    margin: 0 1rem 1rem;
  }
  .product-lin-info > img {
    width: 4rem;
    height: 4rem;
  }
  .product-explain {
    margin: 0 1rem;
  }
  .product-explain>div:first-child {
    color: #000;
    font-weight: bold;
    font-size: 20px;
    height: 2rem;
    line-height: 2rem;
  }


  /* 中间 */
  .product-main-body {
    padding: 2.5rem 1rem 1rem;
    /*border: 1px solid;*/
  }
  .product-money-info {
    display: flex;
    padding: 0 0 0.5rem;
  }
  .product-money-info.l, .product-money-info.r {
    width: 49%;
    display: block;
  }
  .product-money-info.l>div:first-child, .product-money-info.r>div:first-child {
    color: #8c8686;
    font-size: 20px;
  }
  .product-money-info.l>div:last-child, .product-money-info.r>div:last-child {
    font-size: 34px;
    font-weight: bold;
    margin-top: 1.5rem;
  }
  .product-money-info.l>div:last-child{
    color: #ec3e3e;
  }
  .product-money-info.r>div:last-child{
    color: black;
  }


  .product-safe-info{
    margin:2rem 0;

  }
  .product-safe-info > span:first-child >img {
    border: 0;
    height: 16px;
    position: relative;
    top: 0.2rem;
  }

  .product-safe-info > span {
    display: inline-block;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
  }
  .product-safe-info > span:first-child {
    border: 1px solid green;
    width: 70px;
    color: green;
    position: relative;
  }
  .product-safe-info > span:last-child {
    width: 90px;
    border: 1px solid #908b8b;
    color: #908b8b;
    margin-left: 1rem;
  }
  /* 顶部 */
  .product-main {
    text-align: initial;
    overflow-y: auto;
    /*background: #ccc;*/
  }
  .product-main-header {
    display: flex;
    border-top: 1px solid #f1ecec;
    border-bottom: 1px solid #f1ecec;
    padding: 1rem 1rem;
  }
  .product-main-header-info {
    margin-left: 0.5rem;
  }
  .product-main-header-info>div:first-child {
    font-size: 24px;
    color: black;
    font-weight: bold;
    height: 50%;
    line-height: 2rem;
  }
  .product-main-header-info>div:last-child {
    height: 50%;
    line-height: 2rem;
    font-size: 18px;
  }
  .product-main .product-main-header img {
    width: 5rem;
    height: 5rem;
    padding: 0.5rem 0;
  }
</style>
